<template>
  <h3>当前x的值是：{{ x }}</h3>
  <h3>当前y的值是：{{ y.yy }}</h3>
  <button @click="x++">点我x+1</button>
  <button @click="y++">点我y+1</button>
  <hr>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>薪资：{{ job.j1.salary }} K</h2>
  <button @click="name += '~'">姓名变幻</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">增长薪资</button>
</template>

<script>
// Vue3中的computed 是一个组合式的api，所以需要通过import 进行引入。
import {reactive, ref, shallowRef, toRefs} from 'vue';

export default {
  name: 'DemoPage',
  setup() {
    // 数据【其中shallowReactive 函数代表的是浅层次的响应式，只处理第一层，不处理第二层】
    // let person = shallowReactive({ // shallowReactive响应式，只考虑第一层数据的响应式
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    });
    let x = ref(0);
    // 其中 shallowRef 响应式，如果处理的是基本数据类型的话，shallowRef 和 ref 是一样的，如果shallowRef处理的是对象类型的话，就是有区别的。
    let y = shallowRef({
      yy: 0,
    });

    // 返回一个对象（常用）
    return {
      person,
      // 可以使用toRefs直接将对象的全部字段进行解析掉
      ...toRefs(person),
      x,
      y,
    }
  }
}
</script>

<style>

</style>